<script setup lang="ts">
import { ref, reactive } from "vue";
import { classBasic } from "@/stores/BackData/ClassManage/classBasic";

const value = ref("");
const store = classBasic();
// console.log(store.aclass);

const aclass = reactive(store.aclass);
// const basicInfo = reactive({
//   is_compilation: null,
//   class_name: "",
//   thematic_id: "",
//   thematic_name: "",
//   img: "",
// });

// 课程封面
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps, UploadUserFile } from "element-plus";

const fileList = ref<UploadUserFile[]>([
  // {
  //   name: "food.jpeg",
  //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  // },
]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

// 图片上传

const imgUpload = (e: any) => {
  // console.log(e);
  store.img.push(e.raw);
};

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (
  uploadFile: any
) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>
<template>
  <div class="stepone">
    <el-form-item label="是否合集" required>
      <el-select
        v-model="aclass.isCompilation"
        placeholder="选择是否为合集课程"
      >
        <el-option label="是" value="1" />
        <el-option label="否" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="课程名称" required style="max-width: 500px">
      <el-input v-model="aclass.className" placeholder="请输入课程名称" />
    </el-form-item>
    <template v-if="aclass.isCompilation == 1">
      <el-form-item label="所属合集" required>
        <el-select v-model="aclass.thematicId" placeholder="请选择所属专题">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
    </template>

    <el-form-item label="课程封面" required>
      <el-upload
        v-model:file-list="fileList"
        action="http://47.109.30.198:8081/oss/image/image"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :auto-upload="false"
        :on-change="imgUpload"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img
          w-full
          :src="dialogImageUrl"
          alt="Preview Image"
          style="width: 100%"
        />
      </el-dialog>
    </el-form-item>
  </div>
</template>
<style scoped>
.stepone {
  width: 60%;
  margin: auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
